<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
    
    <!--Incluyendo ExtJS -->

    <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext/ext-all-debug.js"></script>
    <script src="./javascript/peticionDatos.js" type="text/javascript"></script> 
 </head>
    <body>
    <h1>Grafica Ocupación</h1>
        <div id="grafica" style="width:1200px;height:600px">
            <div id="fila1" style="width 1000px;height:300px">
                <div id="grafica1" style="float:left;width 500px;height:300px">
                    <div id="placeholder1" style="float:left;width:500px;height:300px"></div>
                    <div id="leyenda1" style="float:right;width:100px;height:50px"></div>
                </div>
                <div id="grafica2" style="float:right;width 500px;height:300px">
                    <div id="placeholder2" style="float:left;width:500px;height:300px"></div>
                    <div id="leyenda2" style="float:right;width:100px;height:50px"></div>
                </div>

            </div>
            <div id="fila2" style="width 1000px;height:300px">
                <div id="grafica3" style="float:left;width 500px;height:300px">
                    <div id="placeholder3" style="float:left;width:500px;height:300px"></div>
                    <div id="leyenda3" style="float:right;width:100px;height:50px"></div>
                </div>
                <div id="grafica4" style="float:left;width 500px;height:300px">
                    <div id="placeholder4" style="float:left;width:500px;height:300px"></div>
                    <div id="leyenda4" style="float:right;width:100px;height:50px"></div>
                </div>
                <div id="grafica5" style="float:left;width 500px;height:300px">
                    <div id="placeholder5" style="float:left;width:500px;height:300px"></div>
                    <div id="leyenda5" style="float:right;width:100px;height:50px"></div>
                </div>
            </div>
        </div>

<script id="source" language="javascript" type="text/javascript">

var pet=[];
  
function errorAjax(){
    error("peticion ajax no realizada");
}

function peticion() {

    //GUnload();
    //killAll();
	//Primero tomariamos el elemento DOM para crear un div mediante update en el que insertaremos la grafica
    //Ext.get('').update('<center><img alt="cargando" align="middle" src="images/ajax-loader.gif"/></center>',false);

    
    /*la llamada a pinta debera tener como parametros el tipo de grafica
    que desamos (horas del día, días de la semana o del mes), si queremos
    la media global de las plazas o individual de cada una y la fecha a
    a partir de la cual queremos las estadisitcas*/
    
    var oGlobal= '0';
    var oTipo= 'semana';
    var fecha='2009-01-01';
    var hora=' 00:00:00';
    var urla='http://localhost/web/php/calculo_est.php?opt='+oTipo+'&fecha='+fecha+hora+'&global='+oGlobal;
    Ext.Ajax.request({
       url: urla ,
       success: function(respuesta){    
        pinta(respuesta,oGlobal,oTipo,fecha);
       }
       //failure: errorAjax
    });
}

function opcionesPlot(leyenda,color,barwidth,xopt,yopt){
            return {bars: { show:true,fill: true, barWidth:barwidth,align:"left"},
                    colors: [color],
                    legend: { show: true,container: $(leyenda) },
                    xaxis: xopt,
                    yaxis: yopt};
}

function pinta(respuesta,oGlobal,oTipo,fecha) {

    var d0=Ext.util.JSON.decode(respuesta.responseText);
    var d1=[];
    var d2=[];
    var d3=[];
    var d4=[];
    var d5=[];
    var d6=[];
    var fi=d0[0].FECHA;
    ////alert(fi.toUTCString());
    //   var fi=d1[0].TIEMPO;
    //	fiUTC=new Date(fi);
    //	var mes=fiUTC.getMonth();
    //	mes=new Number(mes)+1;
    //    var fecha=fiUTC.getDate()+'-'+mes+'-'+fiUTC.getFullYear();
    //    alert (fiUTC);
    var xaxisopt;
    var yaxisopt;
    var barwidth;
    switch (oTipo){
        case 'dia':
            xaxisopt={mode:"time",
                    timeformat:"%H:%M ",
                    tickSize:[2,"hour"],
                    //autoscaleMargin:0.02,
                    minTickSize: [1, "hour"],
                    min:fi,
                    max:fi+(60*60*24*1000)
                    };
            yaxisopt={min:0.0,max:1.0};
            barwidth= 60*60*1000;
            break;
        case 'semana':
            xaxisopt={mode:"time",
                    timeformat:"%d/%m/%y",
                    tickSize:[1,"day"],
                    //autoscaleMargin:0.02,
                    min:fi,
                    //max:fi+(60*60*24*7*1000)
                    };
            yaxisopt={min:0.0,max:1.0};
            barwidth= 24*60*60*1000;
            break;
        case 'mes':
            xaxisopt={mode:"time",
                    timeformat:"%d/%m",
                    tickSize:[2,"day"],
                    //autoscaleMargin:0.02,
                    min:fi,
                    //max:fi+(60*60*24*31*1000)
                    };
            yaxisopt={min:0.0,max:1.0};
            barwidth= 24*60*60*1000;
            break;
        default:
            break;
        
    }
    
    if (oGlobal==1){
        for (var i=0;i<d0.length;i++){
            d1.push([d0[i].FECHA,d0[i].OCUPACION]);
            //alert ('i vale:  ' +i+'  '+d1[i][0]+'  '+d1[i][1]);
        }
        datos=[{label:"Parking",data:d1}];
        $.plot($("#placeholder1"), datos,opcionesPlot("#leyenda1","#0000cc",barwidth,xaxisopt,yaxisopt));
        
    }else{

        for (var i=0;i<d0.length;i++){
            switch (i%5)
            {
                case 0:
                        d1.push([d0[i].TIEMPO,d0[i].OCUPACION]);
                        //alert ('PLAZA 1,  i vale:  ' +i+'  '+d1[i][0]+'  '+d1[i][1]);
                        break;
                case 1:
                        d2.push([d0[i].TIEMPO,d0[i].OCUPACION]);   
                        //alert ('PLAZA 2,  i vale:  ' +i+'  '+d2[i][0]+'  '+d2[i][1]);    
                        break;
                case 2:
                        d3.push([d0[i].TIEMPO,d0[i].OCUPACION]);
                        //alert ('PLAZA 3,  i vale:  ' +i+'  '+d3[i][0]+'  '+d3[i][1]);    
                        break;
                case 3:
                        d4.push([d0[i].TIEMPO,d0[i].OCUPACION]);                      
                        //alert ('PLAZA 4,  i vale:  ' +i+'  '+d4[i][0]+'  '+d4[i][1]);    
                        break;
                case 4:
                        d5.push([d0[i].TIEMPO,d0[i].OCUPACION]);
                        //alert ('PLAZA 5,  i vale:  ' +i+'  '+d5[i][0]+'  '+d5[i][1]);    
                        break;
                default:
                        break;
            }
            //alert ('i vale:  ' +i+'  '+d2[i][0]+'  '+d2[i][1]);
        }
       // datos1=[{label:"plaza 1",data:d1},{label:"plaza 2",data:d2},{label:"plaza 3",data:d3},
       //{label:"plaza 4",data:d4},{label:"plaza 5",data:d5}];
       
        datos1=[{label:"plaza 1",data:d1}];
        datos2=[{label:"plaza 2",data:d2}];
        datos3=[{label:"plaza 3",data:d3}];
        datos4=[{label:"plaza 4",data:d4}];
        datos5=[{label:"plaza 5",data:d5}];
        
     	$.plot($("#placeholder1"), datos1,opcionesPlot("#leyenda1","#0000cc",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder2"), datos2,opcionesPlot("#leyenda2","#cc0000",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder3"), datos3,opcionesPlot("#leyenda3","#ffff33",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder4"), datos4,opcionesPlot("#leyenda4","#66cc99",barwidth,xaxisopt,yaxisopt));
        $.plot($("#placeholder5"), datos5,opcionesPlot("#leyenda5","#ff9900",barwidth,xaxisopt,yaxisopt));
    }
};
peticion();
</script>
</body>
</html>